<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="梦想星辰大海">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>cms后台模板</title>
		<link rel="stylesheet" href="${BASE_PATH}/static/book/res/lib/layui/css/layui.css">
		<style type="text/css">
			.news{
			    margin-left: 20px;
			    padding: 0 10px;
			    font-size: 20px;
			    font-weight: 300;
			    margin-bottom: 15px;
			    margin-top: 20px;
			    font-weight: bold;
			}
		</style>
	</head>

	<body>
		<div class="usernew">
			<div class="news">
				<span>用户信息</span>
			</div>
			 <div class="layui-form-item">
			    <label class="layui-form-label" style="font-family: inherit;font-weight: bold;font-size: 16px;">用户名：</label>
			    <div class="layui-input-block">
			    	<span class="layui-form-label" style="font-family: inherit;font-weight: bold;font-size: 16px;">${user.username}</span>
			    </div>
			 </div>
			 <button id="btn-add" class="layui-btn">添加图书</button>
			 <!--
			 <button id="btn-delall" class="layui-btn">删除选中图书</button>
			 -->
		</div>
		<div class="layui-form">
		    <table class="layui-table">
			    <colgroup>
				  	<col width="100">
				  	<col width="100">
				  	<col width="100">
				  	<col width="100">
				    <col width="200">
				    <col width="200">
				    <col width="150">
				    <col width="120">
				    <col width="80">
				    <col width="200">
			    	<col>
			    </colgroup>
			    <thead>
			        <tr>
			    	  <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
					  <th>图书编号</th>
				      <th>书名</th>
				      <th>作者</th>
				      <th>出版社</th>
				      <th>操作</th>
			        </tr> 
			    </thead>
			    <tbody id="view">
			    	
			    </tbody>
		    </table>
		    <button id="btn-borrow" class="layui-btn" lay-submit="" lay-filter="ff">提交</button>
		</div>
	</body>
	<script type="text/javascript" src="${BASE_PATH}/static/book/res/lib/layui/layui.js"></script>
	<script>
	layui.use(['laypage', 'layer','form','laytpl'], function(){
		
		//渲染选中的数据列表
		function renderTr(data){
	  		var getTpl = $("#tpl").get(0).innerHTML;
		   	laytpl(getTpl).render(data, function(html){
		   		$("#view").html(html)
			});//数据视图
			form.render('checkbox');
	  	}
	  	
	  	
	  	var $ = layui.jquery;
	  	var form = layui.form();
	  	var laypage = layui.laypage;
	  	var layer = layui.layer;
	   	var laytpl = layui.laytpl;
	  	var bookMap={};//保存被选的书籍
	  	
	  	
	  	//全选
	  	form.on('checkbox(allChoose)', function(data){
		    var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
		    child.each(function(index, item){
		      item.checked = data.elem.checked;
		    });
		    form.render('checkbox');
	  	});
	  	
	  	//删除选中书籍
	  	$(".layui-table").on("click",'.btn-del',function(){
	  		var key=$(this).attr("data-key");
	  		delete bookMap[key]; 
	  		renderTr(bookMap);
	  	});
	  	
	  	//添加书籍
	  	$("#btn-add").on("click",function(){
	  		layer.open({
	  			area: ['1000px', '700px'],//弹框的宽高
		  		type: 2, //基本层类型 2为iframe层
		  		content: ['${BASE_PATH}/book/admin/book/select.htm', 'yes'],//弹框的路经地址URL
		  		btn: ['确定'],//按钮
		  		yes: function(index, layero){
				    var iframeWin = window[layero.find('iframe')[0]['name']];
				    var dataList=iframeWin.selectData();
				    if(dataList.length===0){
				    	alert("没有选择数据");
				    	return;
				    }
				    var data;
				    for(var key in dataList){
				    	data=dataList[key];
				    	bookMap["b"+data.bookId]=data;
				    }//下标索引
				   	renderTr(bookMap);//渲染视图
			  	}//确定按钮回调方法
			}); 
	  	});
	 	
	 	//提交事件
	 	$("#btn-borrow").on("click",function(){
	 		var data={};
	 		data.userId=${user.userId};
	 		data.bookIds=[];
	 		for(var key in bookMap){
	 			data.bookIds.push(bookMap[key].bookId);
	 		}
	 		$.ajax({
	 			url:"${BASE_PATH}/book/admin/borrow/batchBorrow.json",
	 			data:data,
	 			success:function(res){
	 				if(res.result){
	 					location.reload();
	 				}
	 			}
	 		})
	 	})
	 	
	});
	</script>
	<script id="tpl" type="text/html">
		{{#  layui.each(d, function(index, item){ }}
		  <tr>
	    	  <td><input type="checkbox" name="ids" lay-skin="primary" lay-filter="allChoose"></td>
			  <td>{{ item.number  }}</td>
		      <td>{{ item.name  }}</td>
		      <td>{{ item.author  }}</td>
		      <td>{{ item.press  }}</td>
		      <td class="btn-del" data-key="b{{item.bookId}}">删除</td>
        	</tr> 
		{{#  }); }}
		 //模板
	</script>

</html>